﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>
    <link href="../css/bootstrap-slider.min.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap-slider.min.js"></script>
</head>
<body>
    <style>
        #canvas {
            background: white;
        }
    </style>
    <div class="container">
        <button class="btn btn-primary" id="playBtn">
            <i class="glyphicon glyphicon-pause"></i>
        </button>
    </div>
    <canvas id="canvas" width="800" height="300"></canvas>
    <script>
        var url = '../content/audio/海阔天空.mp3';
        if (!window.AudioContext) {
            alert('您的浏览器不支持AudioContext');
        } else {
            //创建上下文
            var atx = new AudioContext();
            var source = null;
            //使用Ajax获取音频文件
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';//配置数据的返回类型
            //加载完成
            request.onload = function () {
                var arraybuffer = request.response;
                atx.decodeAudioData(arraybuffer, function (buffer) {
                    //创建分析器
                    var analyser = atx.createAnalyser();
                    source = atx.createBufferSource();
                    //将source与分析器链接
                    source.connect(analyser);
                    //将分析器与destination链接，这样才能形成到达扬声器的通路
                    analyser.connect(atx.destination);
                    //将解码后的buffer数据复制给source
                    source.buffer = buffer;
                    //播放
                    source.start(0);

                    //开始绘制频谱图
                    var canvas = document.getElementById('canvas'),
                        cwidth = canvas.width,
                        cheight = canvas.height;
                    var ctx = canvas.getContext('2d');
                    //定义一个渐变样式用于画图
                    var gradient = ctx.createLinearGradient(0, 0, 0, 300);
                    gradient.addColorStop(1, '#0f0');
                    gradient.addColorStop(0.5, '#ff0');
                    gradient.addColorStop(0, '#f00');
                    ctx.fillStyle = gradient;
                    //绘制频谱图
                    function drawSpectrum() {
                        var array = new Uint8Array(analyser.frequencyBinCount);
                        analyser.getByteFrequencyData(array);
                        //清理画布
                        ctx.clearRect(0, 0, cwidth, cheight);
                        //只绘制出当前宽度内的线
                        /*
                        *从频率分布数据中可以看到数组中大于800的数据都是0
                        */
                        for (var i = 0; i < cwidth; i++) {
                            var value = array[i];
                            ctx.fillRect(i, cheight - value, 1, cheight);
                        }
                        requestAnimationFrame(drawSpectrum);
                    }
                    requestAnimationFrame(drawSpectrum);
                }, function (e) {
                    console.info('处理出错');
                });
            }
            request.send();
            //绑定播放按钮
            $('#playBtn').click(function () {
                var icon = $(this).find('i');;
                icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
                //停止播放
                source.stop();
            });
        }
    </script>
</body>
</html>
